<template>
    <div class="popup-component">
        <div class="popup-header">
            <span>{{ title }}</span>
            <span class="close" @click="closePopup">X</span>
        </div>
        <div class="popup-content">
            弹窗内容
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    title: {
        type: String,
        default: ""
    }
});
const emits = defineEmits(["closePopup"]);
const closePopup = () => {
    emits('closePopup');
};
</script>

<style lang="less" scoped>
.popup-component {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;

    .popup-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .close {
            cursor: pointer;

        }

    }

    .popup-content {
        padding: 10px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>